<template>
  <div class="Crowdfunding">
    <sponsor
      :cover="sponsor.cover"
      :name="sponsor.name"
      :description="sponsor.description"
      :content="sponsor.content"
    >
    </sponsor>
    <ul class="btnNav">
      <li class="li01" @click="share">我要分享</li>
    </ul>
    <div class="share" v-show="tips">
      <tips></tips>
      <div class="btn" @click="clickTip"></div>
    </div>
    <div class="boxnull"></div>
  </div>
</template>

<script>
  import { requestStoreId, requestJssdk, requestMe } from '../../api/api'
  import detailIn from '../../components/detail'
  import CrowdfundPeople from '../../components/attendant'
  import { shareUrl } from '../../config'
  export default{
    name: 'Crowdfunding',
    components: {
      detailIn: detailIn,
      CrowdfundPeople: CrowdfundPeople
    },
    data () {
      return {
        sponsor: [],
        hidden: false,
        detailsId: '',
        tips: false,
        appId: '',
        timestamp: '',
        nonceStr: '',
        signature: '',
        r: '',
        spreaderId: ''
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        const _this = this
        this.loadData().then(function () {
          window.wx.ready(function () {
            const shareobj = {
              title: _this.sponsor.name,
              imgUrl: _this.sponsor.cover,
              desc: _this.sponsor.description,
              link: shareUrl + '/signDetail?sponsorsId=' + _this.$route.query.sponsorsId + '&spreaderId=' + _this.spreaderId,
              success: function () {
                _this.$swal('成功', '分享成功', 'success')
              }
            }
            window.wx.onMenuShareTimeline(shareobj)
            window.wx.onMenuShareAppMessage(shareobj)
            window.wx.onMenuShareQQ(shareobj)
            window.wx.onMenuShareWeibo(shareobj)
            window.wx.onMenuShareQZone(shareobj)
          })
        })
      })
    },
    methods: {
      toGetwxConfig: function () {
        let e = this
        requestJssdk({}).then(function (res) {
          e.r = res.data
          window.wx.config({
            debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: res.data.appId, // 必填，公众号的唯一标识
            timestamp: e.r.timestamp, // 必填，生成签名的时间戳
            nonceStr: e.r.nonceStr, // 必填，生成签名的随机串
            signature: e.r.signature, // 必填，签名，见附录1
            jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'onMenuShareQZone'] // 分享到朋友圈 分享给朋友
          })
        })
      },
      loadData: function () {
        let e = this
        return requestMe({}).then(
          (user) => {
            if (user && user.role_list) {
              if (user.role_list.is_store_spreader !== false) {
                return requestStoreId(this.$route.query.sponsorsId, {}).then(function (res) {
                  if (res && res.data) {
                    e.sponsor = res.data
                    e.spreaderId = user.id
                  }
                })
              } else {
                e.$swal('error', '您不是会籍', 'error')
                window.localStorage.removeItem('user')
              }
            }
            return user
          }
        )
      },
      share: function () {
        this.tips = true
        console.log(shareUrl + '/signDetail?sponsorsId=' + this.$route.query.sponsorsId + '&spreaderId=' + this.spreaderId,
        )
      },
      clickTip: function () {
        this.tips = false
      }
    }
  }
</script>

<style lang="less" scoped>
  @in:30.5rem;
  @border:#e8e8e8;
  @font:#8e8e8e;
  @orange:#f1ae9b;
  body{
    background: #fff;
  }
  .boxnull{
    width: 100%;
    height: 3.2rem;
  }
  .Crowdfunding{
    width: 100%;
    height: auto;
    overflow: hidden;
    .nav{
      width: 100%;
      height: 50/2/10rem;
      border-bottom:1px solid @border;
      li{
        width: 50%;
        height: 50/2/10rem;
        float: left;
        text-align: center;
        line-height:50/2/10rem;
        font-size:1.2rem;
      }
      .current{
        color: @orange;
      }
    }
    .personBox{
      width: 100%;
      height: auto;
      overflow: hidden;
      border-bottom:1px solid @border;
      .personIn{
        width:@in;
        height: auto;
        overflow: hidden;
        margin:0 auto;
        padding:1rem 0;
        .imgBox{
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          overflow: hidden;
          float: left;
          margin:0 1.5rem;
          img{
            width: 3rem;
            height: 3rem;
            display: block;
          }
        }
        .font{
          float: left;
          width: 24.5rem;
          .nameBox{
            font-size:1.1rem;
            height: auto;
            overflow: hidden;
            color: #000;
            padding-right:2rem;
            .name{
              float: left;
            }
            .money{
              float: right;
              margin-left:10rem;
              span{
                color: @orange;
              }
            }
          }
          article{
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            margin-bottom:0.4rem;
            font-size:1.1rem;
          }
          .time{
            float: right;
          }
        }
      }
    }
    .inputBox{
      width: @in;
      height:60/2/10rem;
      margin:0.5rem auto;
      position: relative;
      border-radius: 0.25rem;
      overflow: hidden;
      .txt{
        width: @in;
        height:60/2/10rem;
        position: absolute;
        left:0;
        top:0;
        background: #ededed;
      }
      .btn{
        width: 200/2/10rem;
        height: 3rem;
        background: @orange;
        position: absolute;
        right:0;
        top:0;
        border-radius: 0.25rem;
        color: #fff;
      }
    }
    .assessBox{
      width: 100%;
      height: auto;
      overflow: hidden;
      border-bottom:1px solid @border;
      .assessIn{
        width: @in;
        height: auto;
        overflow: hidden;
        margin:0 auto;
        padding:15/2/10rem 0;
        .imgBox{
          width: 3rem;
          height: 3rem;
          border-radius: 50%;
          overflow: hidden;
          float: left;
          margin:0 30/2/10rem;
          img{
            width: 3rem;
            height: 3rem;
            display: block;
          }
        }
        .font{
          float: left;
          width: 24.5rem;
          .nameBox{
            font-size:1.1rem;
            height: auto;
            overflow: hidden;
            color: #000;
            .name{
              float: left;
            }
            .money{
              float: left;
              margin-left:10rem;
              span{
                color: @orange;
              }
            }
          }
          article{
            overflow:hidden;
            text-overflow:ellipsis;
            display:-webkit-box;
            -webkit-box-orient:vertical;
            -webkit-line-clamp:2;
            margin-bottom:0.4rem;
            font-size:1.1rem;
          }
          .time{
            float: right;
          }
        }
      }
    }
    .btnNav{
      width: 100%;
      height: 3.2rem;
      position: fixed;
      left:0;
      bottom:0;
      li{
        float: left;
        width: 100%;
        height: 3.2rem;
        text-align: center;
        line-height:3.2rem;
        color: #fff;
        font-size:1.2rem;
      }
      .li01{
        background: #96e896;
      }
      .li02{
        background: @orange;
      }
      .used{
        background: #8e8e8e;
      }
    }
    .detailBox{
      width: 100%;
      height: auto;
      overflow: hidden;
      border-bottom:3px solid #ededed;
      position: relative;
      padding-bottom:1rem;
      button{
        color: #f1ae9b;
        background:#fff url(../../assets/images/arrow.png) no-repeat center top;
        -webkit-background-size:1.2rem 13/2/10rem;
        background-size:1.2rem 13/2/10rem;
        float: right;
        width: 5rem;
        padding-top:1rem;
        height: 2.5rem;
        font-size:0.9rem;
        position: absolute;
        right:1rem;
        bottom:1rem;
      }
    }
    .share{
      width: 100%;
      height: 100%;
      position: fixed;
      left:0;
      top: 0;
      background: rgba(0,0,0,0.5);
      Null{
        position: fixed;
        left:0;
        top:0;
      }
      .btn{
        width: 100%;
        height: 5rem;
        position: fixed;
        left:0;
        top:42%;
      }
    }
    .detail-in{
      img{
        width: 100%;
        height: auto;
      }
    }
  }

</style>
